<template>
  <view class="container">
    <view class="record-list">
      <view class="record-item" v-for="(item, index) in records" :key="index">
		  <view class="record-item-left">
			  <text class="store-name">{{ item.storeName }}</text>
			  <view class="record-date">{{ item.date }}</view>
		  </view>
        <text class="record-amount">{{ item.amount }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      records: [
        { storeName: 'XXX店洗车', date: '2022-10-10 11:09', amount: '-50.00' },
        { storeName: 'XXX店洗车', date: '2022-10-10 11:09', amount: '-50.00' },
        { storeName: 'XXX店洗车', date: '2022-10-10 11:09', amount: '-50.00' },
        { storeName: 'XXX店洗车', date: '2022-10-10 11:09', amount: '-50.00' },
        { storeName: 'XXX店洗车', date: '2022-10-10 11:09', amount: '-50.00' },
        { storeName: 'XXX店洗车', date: '2022-10-10 11:09', amount: '-50.00' },
        { storeName: 'XXX店洗车', date: '2022-10-10 11:09', amount: '-50.00' },
        { storeName: 'XXX店洗车', date: '2022-10-10 11:09', amount: '-50.00' },
      ],
    };
  },
};
</script>

<style>
.container {
 
  background-color: #f9f9f9;
  
}


.record-list {
  background-color: #fff;
  border-radius: 10rpx;
  
}

.record-item {
  padding: 15rpx;
  height: 100rpx;
  border-bottom: 1px solid #eee;
}
.record-item-left{
	margin-left: 20rpx;
	float: left;
}

.store-name {
  font-size: 18px;
  color: #333;
}

.record-date {
  font-size: 14px;
  margin-top: 20rpx;
  color: #999;
}

.record-amount {
	float: right;
	line-height: 100rpx;
  font-size: 16px;
  color: #e74c3c; /* 红色 */
  margin-right: 20rpx;
}
</style>